/**
 * Video
 */

 import consts from "../../../../../consts/consts";
 import storage from "../../../../../utils/storage";
 import Header from "../Header";
 import React,{Component} from "react";
 
 class Video extends Component{
    componentWillReceiveProps(nextProps){
        let widget = nextProps.data;
        let video = this.refs.video;
        if　(widget.pause){
            video.play();
        } else {
            video.pause();
        }
    }
    componentDidMount(){
        // 将右侧属性栏中视频的音量调整为0，以防止播放时同时出现2个视频声音的问题
        let video = this.refs.video;
        video.volume = 0;
    }
    handleOnChangeVideo(){
        const {data} = this.props;
//        storage.data.is_edit_video = true;
//        root.openDialog(consts.WIDGET_TYPE.VIDEO);
        console.log("open dialog");
    }
    handleOnChangeStatus(){
        const {data: widget,setState} = this.props;
        widget.pause = !widget.pause;
        setState({selectedWidget: widget});
    }
    render(){
        const {type,data,selectedWidgetId,updateWidget,setState,selectContents} = this.props;
        let src = data.url || data.action.url;
        let focus =(data.widget_id == selectedWidgetId);
        let vStyle = {
            width:  "198px"
        };
        data.pause = data.pause == undefined ? !!data.auto_play : data.pause;
        return (
          <div ref="content" className={"content-item " + (focus ? "focus " : " ") + (data.visible ? "unfold " : "fold ")} onClick={() => selectContents(data)}>
              <Header type={type} data={data} updateWidget={updateWidget} setState={setState}/>
              <div className="content">
                  <div className="video-container">
                      <div onClick={() => this.handleOnChangeStatus()} ref="mask" className={"video-mask " + (data.pause ? "template-pause" : "template-play")}>
                          <i></i>
                      </div>
                      <video src={src} ref="video" style={vStyle} preload="metadata" className="video-js vjs-default-skin">
                          <source src={src} />
                      </video>
                  </div>
                  <button onClick={() => this.handleOnChangeVideo()}>{$._("Replace")}{$._('Video')}</button>
              </div>
          </div>
        )
    }
 }

 module.exports = Video;
